<template>
  <div>
    <el-dialog v-model="state.dialogVisible" :close-on-click-modal="false" :modal-append-to-body="false" width="600px">
      <el-row :gutter="0">
        <el-form ref="elFormRef" :model="state.formData" :rules="state.rules" size="small" label-width="100px">
          <el-col :span="24">
            <el-form-item label="选项名" prop="label">
              <el-input v-model="state.formData.label" placeholder="请输入选项名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选项值" prop="id">
              <el-input v-model="state.formData.id" placeholder="请输入选项值" clearable> </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <template #footer>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="CascaderTreeNode">
import { reactive, ref } from "vue";

const state = reactive({
  dialogVisible: false,
  formData: {
    label: "",
    id: ""
  },
  rules: {
    label: [{ required: true, message: "请输入选项名", trigger: "blur" }],
    id: [{ required: true, message: "请输入选项值", trigger: "blur" }]
  }
});
const elFormRef = ref();

const open = () => {
  state.dialogVisible = true;
  state.formData = { label: "", id: "" };
};
const close = () => {
  state.dialogVisible = false;
};
const emits = defineEmits(["commit"]);
const handelConfirm = () => {
  elFormRef.value.validate((valid: boolean) => {
    if (!valid) return;
    emits("commit", state.formData);
    close();
  });
};
defineExpose({
  open
});
</script>
